<template>
  <div>
    <!-- 搜索 Begin -->
    <div
      class="bg-[--el-color-primary-light-8] flex flex-justify-center flex-items-center flex-wrap p-x-50px p-y-30px m-b-10px border-1px border-solid border-[--el-border-color-light]"
    >
      <el-input
        v-model="searchParams.websiteName"
        placeholder="请输入网站名称..."
        clearable
        class="w-80% h-38px text-13px <sm:w-100% <sm:m-b-6px"
        @keyup.enter.native="handleSearch()"
      >
      </el-input>
      <el-button
        class="uppercase tracking-1px w-20% <sm:w-100% h-38px rounded-0 text-#FFF bg-#000 hover:bg-#000 text-12px"
        @click="handleSearch"
      >
        Search
      </el-button>
    </div>
    <!-- 搜索 End -->
    <!-- 网站分类 Begin -->
    <div
      :class="{ 'h-auto': websiteTypeOverflow }"
      class="pos-relative h-56px overflow-hidden m-b-10px p-8px bg-#FAFAFA rounded-4px dark:bg-[rgba(0,0,0,0.3)] border-1px border-solid border-[--el-border-color-light]"
      v-if="typeList.length > 0"
    >
      <div class="flex flex-items-center flex-wrap gap-6px text-16px p-r-36px">
        <div
          class="p-x-10px p-y-5px text-[--el-text-color-primary] border-1px border-solid border-[--el-border-color] hover:text-[--el-color-primary] hover:bg-[rgb(245,245,245)] dark:hover:bg-[rgb(245,245,245,0.07)] rounded-4px whitespace-nowrap select-none"
          style="font-family: Muli, sans-serif"
          v-for="item in typeList"
          :key="item.dictId"
          @click="handleWebsiteType(item.dictValue)"
          :class="{
            '!text-#FFF !bg-[--el-color-primary]': item.dictValue == dictValue
          }"
        >
          {{ item.dictLabel }}
        </div>
      </div>
      <div class="pos-absolute top-12px right-8px hover:text-[--el-color-primary]">
        <el-button circle @click="handleWebsiteTypeOverflow">
          <el-icon v-if="!websiteTypeOverflow">
            <plus />
          </el-icon>
          <el-icon v-else>
            <Minus />
          </el-icon>
        </el-button>
      </div>
    </div>
    <!-- 骨架屏 Begin -->
    <div v-else>
      <el-skeleton animated>
        <template #template>
          <el-skeleton-item class="w-100% h-56px m-b-10px" />
        </template>
      </el-skeleton>  
    </div>
    <!-- 骨架屏 End --> 
    <!-- 网站分类 End -->

    <!-- 网站列表 Begin -->
    <el-row :gutter="27">
      <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24" class="m-b-30px" v-for="item in websiteList" :key="item.websiteId" v-if="!websiteIsSkeleton">
        <div
          class="border-1px border-solid border-[--el-color-primary-light-7] p-20px rounded-15px hover:border-[--el-color-primary] transition-all transition-300 transition-ease"
        >
          <div class="w-100% h-197px <md:h-360px <sm:h-330px overflow-hidden m-b-15px rounded-15px">
            <el-image
              :src="item.picture"
              fit="cover"
              class="w-100% h-100% rounded-15px hover:transform-scale-105 transition-all duration-600 ease-in-out"
            >
              <template #error>
                <el-image :src="errorUrl" fit="contain" class="w-100% h-100% rounded-15px"></el-image>
              </template>
            </el-image>
          </div>
          <!-- 网站分类 -->
          <div
            class="capitalize text-18px font-700 text-[--el-color-primary] tracking-1px m-b-6px line-clamp-1"
            style="font-family: 'Dancing Script', cursive"
          >
            {{ getDictLabel(item.websiteType) }}
          </div>
          <!-- 网站名称 -->
          <el-tooltip :content="item.websiteName" :show-after="1500" placement="right">
            <div
              class="text-18px text-[--el-text-color-primary] font-700 tracking-1px m-b-15px line-clamp-1"
            >
              {{ item.websiteName }}
            </div>
          </el-tooltip>
          <!-- 网站作者 AND 创建时间 -->
          <div
            class="text-center m-y-10px flex flex-row flex-justify-start flex-items-center line-clamp-1"
            style="font-family: 'Muli', sans-serif"
          >
            <div class="border-1px border-solid border-[--el-color-primary] w-50px h-50px p-1px rounded-full m-r-8px">
              <el-image :src="avatarUrl" fit="cover" class="w-50px h-50px hover:opacity-70 rounded-full">
                <template #error>
                  <el-image :src="errorUrl" fit="contain" class="w-50px h-50px"></el-image>
                </template>
              </el-image>
            </div>
            <div class="text-14px font-600 text-#52565B dark:text-#D8D8D8 line-height-13px">
              {{ item.nickName }}
            </div>
            <div class="text-[--el-color-primary] text-12px m-x-3px font-bold">﹣</div>
            <div class="text-13px text-#52565B dark:text-#D8D8D8">{{ item.createTime }}</div>
          </div>
          <!-- 网站描述 -->
          <div class="text-#7E7E7E dark:text-#D8D8D8 text-14px h-46px line-clamp-2">
            {{ item.remark }}
          </div>
          <!-- 阅读更多 -->
          <div
            class="text-12px hover:text-[--el-color-primary] text-#1D1D1D dark:text-#D8D8D8 uppercase tracking-1px font-600 m-t-15px inline-block border-b-solid border-b-1px border-b-[--el-color-primary]"
            @click="handleLink(item.websiteLink)"         
          >
            JUMP LINK
          </div>
        </div>
      </el-col>
      <!-- 骨架屏 Begin -->
      <div class="w-100%" v-else>
        <el-skeleton animated>
          <template #template>
            <div class="flex flex-wrap flex-justify-center">
              <div class="p-x-15px w-50% flex flex-col flex-justify-between m-b-15px" v-for="(_item, index) in 12" :key="index">
                <el-skeleton-item variant="image" class="w-100% h-256px <md:h-360px m-r-10px m-b-15px" />
                <el-skeleton-item class="w-120px h-26px m-b-15px" />
                <div class="flex flex-row flex-items-center m-b-10px">
                  <el-skeleton-item variant="image" class="rounded-full w-30px h-30px m-r-10px" />
                  <el-skeleton-item class="w-200px h-20px" />
                </div>
                <el-skeleton-item class="w-100% h-50px m-b-16px" />
                <el-skeleton-item class="w-120px h-26px m-b-16px" />
              </div>  
            </div>    
          </template>
        </el-skeleton>  
      </div>
      <!-- 骨架屏 End --> 
      <!-- 网站数据为 0 -->
      <div class="w-100% flex flex-justify-center" v-if="websiteList.length == 0 && !websiteIsSkeleton">
        <el-empty :image="errorUrl" :image-size="300" description="主人，没有数据了哟👻"></el-empty>
      </div>
    </el-row>
    <div class="flex flex-justify-center m-t-10px">
      <!-- 分页 -->
      <el-pagination
        background
        :pager-count="5"
        v-model:current-page="searchParams.pageNo"
        v-model:page-size="searchParams.pageSize"
        v-show="total > 0"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleListPage"
        @current-change="handleListPage"
      />
    </div>
    <!-- 网站列表 End -->
    
    <!-- 网站申请 Begin -->
    <div class="row-title flex flex-items-center flex-justify-center m-t-40px m-b-40px w-100%">
      <div
        class="col-title capitalize text-center text-22px text-#333 dark:text-#D8D8D8 font-700 tracking-1px"
        style="font-family: 'Open Sans', sans-serif"
      >
        Friend link application
      </div>
    </div>
    <div>
      <div class="flex flex-justify-center">
        <KoiUploadImage v-model:imageUrl="websiteForm.avatar" disabled>
          <template #content>
            <el-icon><Avatar /></el-icon>
            <span>请上传头像</span>
          </template>
          <template #tip>图片最大为 3M</template>
        </KoiUploadImage>
      </div>
      <div class="text-12px text-center m-y-10px text-#727272 dark:text-#D8D8D8">温馨提示：输入QQ号后，自动获取QQ头像和QQ昵称！</div>
      <div class="flex w-100% gap-60px">
        <input type="text" placeholder="QQ号 *" v-model="websiteForm.qq" @input="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
        <input type="text" placeholder="QQ昵称 *" v-model="websiteForm.nickName" @input="getQQApi" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
      </div>
      <div class="flex w-100%">
        <input type="text" placeholder="Custom Avatar *" v-model="websiteForm.avatar" @input="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
      </div>
      <div class="flex w-100% gap-60px">
        <input type="text" placeholder="微信号 *" v-model="websiteForm.wechat" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
        <input type="text" placeholder="朋友名字 *" v-model="websiteForm.friendName" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
      </div>
      <div class="flex w-100% gap-60px">
        <input type="text" placeholder="网站名字 *" v-model="websiteForm.websiteName" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
        <input type="text" placeholder="网站链接 *" v-model="websiteForm.websiteLink" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
      </div>
      <div class="flex w-100% gap-60px">
        <input type="text" placeholder="网站图片地址 *" v-model="websiteForm.picture" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
      </div>
      <div class="w-100% flex">
        <textarea placeholder="网站描述 *" rows="7" v-model="websiteForm.remark" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif"></textarea>
      </div>
      <div class="flex flex-justify-between">
        <el-popover
          :width="385"
          trigger="hover"
        >
          <template #reference>
            <el-button circle class="text-16px">😊</el-button>
          </template>
          <div class="text-26px flex flex-wrap">
            <div v-for="(item, index) in emojiList" :key="index" @click="handleEmoji(item)">{{ item }}</div>
          </div>
        </el-popover>
        <el-button
          class="uppercase tracking-1px w-150px h-45px rounded-0 text-12px text-#fff hover:text-#fff font-500 bg-[--el-color-primary] hover:bg-[--el-color-primary]"
          @click="handleConfirm"
        >
          <div style="font-family: 'Roboto', sans-serif">Send Friend</div>
        </el-button>
      </div>
    </div>
    <!-- 网站申请 End -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import errorUrl from "@/assets/images/error/404.png";
import { koiMsgWarning, koiMsgSuccess, koiMsgError } from "@/utils/koi.ts";
import { listDictData, listPage, apply } from "@/api/blog/friend/index.ts";
// import { getQQMessage } from "@/api/blog/qq/index.ts";
import useCommentStore from "@/stores/modules/comment.ts";

const commentStore = useCommentStore();

const avatarUrl = "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp";

/** 查询参数 */
const searchParams = ref<any>({
  websiteName: "", // 文章标题
  websiteType: "",
  pageNo: 1, // 第几页
  pageSize: 10 // 每页显示多少条
});

const total = ref(100); 

const websiteList = ref<any>([]);

/** 搜索 */
const handleSearch = () => {
  console.log("搜索");
  searchParams.value.pageNo = 1;
  handleListPage();
};

onMounted(async () => {
  await handleDictData();
  handleWebsiteValue();
  handleListPage();
});

// 骨架屏是否显示[默认关闭]
const websiteIsSkeleton = ref(false);

/** 数据表格 */
const handleListPage = async () => {
  try {
    websiteIsSkeleton.value = true;
    websiteList.value = []; // 重置表格数据
    const res: any = await listPage(searchParams.value);
    websiteList.value = res.data.records;
    total.value = res.data.total;
    websiteIsSkeleton.value = false;
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
};

// 分类卡片
const websiteTypeOverflow = ref(false);
const handleWebsiteTypeOverflow = () => {
  websiteTypeOverflow.value = !websiteTypeOverflow.value;
};

const typeList = ref<any>([]);

/** 获取字典数据 */
const handleDictData = async () => {
  try {
    typeList.value = [];
    const res: any = await listDictData();
    console.log("数据->", res.data);
    typeList.value = res.data;
    let newWebsite = { dictId: 0, dictLabel: "Full", dictValue: "0" };
    typeList.value = [newWebsite, ...res.data];
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
};

/** 根据 dictValue 获取对应的 dictLabel */
const getDictLabel = (value: string) => {
  const item = typeList.value.find((item: any) => item.dictValue === value);
  return item ? item.dictLabel : "";
}

const dictValue = ref<any>(0);

/** 点击网站类型 */
const handleWebsiteType = (value: any) => {
  dictValue.value = value;
  if (value == 0) {
    searchParams.value.websiteType = null;
  } else {
    searchParams.value.websiteType = value;
  }
  handleListPage();
};

/** 跳转链接 */
const handleLink = (link: any) => {
  window.open(link, "_blank");
};

// 网站表单
const websiteForm = ref<any>({
  avatar: "",
  qq: "",
  nickName: "",
  wechat: "",
  friendName: "",
  websiteName: "",
  websiteLink: "",
  picture: "",
  remark: ""
});

/** 重置表单 */
const resetWebsiteForm = () => {
  websiteForm.value = {
    avatar: "",
    qq: "",
    nickName: "",
    wechat: "",
    friendName: "",
    websiteName: "",
    websiteLink: "",
    picture: "",
    remark: ""
  }
};

/** 根据QQ号获取昵称和头像信息 */
const getQQApi = async () => {
  if (websiteForm.value.qq.length === 0) {
    koiMsgError("请输入正确的QQ号！");
    return;
  }
  // 判断QQ号的长度
  if (websiteForm.value.qq.length < 5) {
    // 如果长度小于5，QQ号不完整，返回错误信息
    koiMsgError("请输入正确的QQ号！");
    return;
  }
  
  // const res: any = await getQQMessage(websiteForm.value.qq);

  // if (res.code != 200) {
  //   koiMsgError("获取QQ信息失败，请检查网络！");
  //   return;
  // };
  
  // const { name, imgurl } = res;
  // websiteForm.value.nickName = name;
  // websiteForm.value.avatar = imgurl;

  websiteForm.value.avatar = `http://q.qlogo.cn/headimg_dl?dst_uin=${websiteForm.value.qq}&spec=640&img_type=jpg`;
  commentStore.setQq(websiteForm.value.qq);
  commentStore.setAvatar(websiteForm.value.avatar);
  commentStore.setNickName(websiteForm.value.nickName);

  if (websiteForm.value.avatar.length === 0) {
    koiMsgError("头像信息获取失败，请自行上传！");
    return;
  }
  if (websiteForm.value.nickName.length === 0) {
    koiMsgError("昵称信息获取失败，请自行填写！");
    return;
  }
}

/** 网站表单默认值 */
const handleWebsiteValue = () => {
  websiteForm.value.qq  = commentStore.qq;
  websiteForm.value.avatar = commentStore.avatar;
  websiteForm.value.nickName = commentStore.nickName;
};

/** 提交 */
const handleConfirm = async () => {
  if (websiteForm.value.qq.length === 0) {
    koiMsgWarning("请输入正确的QQ号！");
    return;
  }
  if (websiteForm.value.avatar.length === 0) {
    koiMsgWarning("请上传头像！");
    return;
  }
  if (websiteForm.value.nickName.length === 0) {
    koiMsgWarning("请填写昵称！");
    return;
  }
  if (websiteForm.value.websiteName.length === 0) {
    koiMsgWarning("请填写网站名字！");
    return;
  }
  if (websiteForm.value.websiteLink.length === 0) {
    koiMsgWarning("请填写网站链接！");
    return;
  }
  if (websiteForm.value.picture.length === 0) {
    koiMsgWarning("请填写网站图片地址！");
    return;
  }
  if (websiteForm.value.remark.length === 0) {
    koiMsgWarning("请输入网站描述！");
    return;
  }

  try {
    await apply(websiteForm.value);
    koiMsgSuccess("申请成功，请耐心等待审核...");
    commentStore.setQq(websiteForm.value.qq);
    commentStore.setAvatar(websiteForm.value.avatar);
    commentStore.setNickName(websiteForm.value.nickName);
    resetWebsiteForm();
    handleWebsiteValue();
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
};

const emojiList = ref<any>([
  "😀",
  "😄",
  "😊",
  "😁",
  "😂",
  "🙂",
  "🥰",
  "😘",
  "😗",
  "😚",
  "🤭",
  "🤫",
  "🤔",
  "🤪",
  "🤐",
  "😐️",
  "🤑",
  "😴",
  "😑",
  "😷",
  "😵‍💫",
  "🥳",
  "😎",
  "😭",
  "😱",
  "🤬",
  "💩",
  "🤡",
  "👻",
  "💖",
  "💔",
  "💢",
  "🫰",
  "🤞",
  "👊",
  "👎️",
  "👏",
  "🤝",
  "💪",
  "🤙",
  "👍️",
  "🤝",
  "🐽",
  "🐻",
  "🦄",
  "🕊️",
  "🏵️",
  "💐",
  "🍉",
  "🧀",
  "🍡",
  "🦀",
  "🦐",
  "🦞",
  "☕️",
  "🍻",
  "☃️",
  "🚫",
  "🏀",
  "🎖️"
]);

const handleEmoji = (emoji?: any) => {
  websiteForm.value.remark += emoji;
};
</script>

<style scoped></style>
